<template>
	<div>
		<div class="box">
			<div class="title">变更记录</div>
			<table-page
				:loading="loading"
				:dataList="dataList"
				:total="total"
				:page.sync="queryParams.pageNum"
				:limit.sync="queryParams.pageSize"
				:border="true"
				@setSizeCurrent="getList">
				<!-- 操作插槽 -->
				<template slot="tableColAc">
					<el-table-column label="操作" align="center" width="120">
						<template slot-scope="scope">
							<el-button
								type="text"
								size="mini"
								@click="toContractChangePreview(scope.row)">
								详情
							</el-button>
						</template>
					</el-table-column>
					<TableCloumn
						v-for="(item, index) in tableCloumns"
						:config="item"></TableCloumn>
				</template>
			</table-page>
		</div>
	</div>
</template>

<script>
	import FromItem from '@/views/finance/reimburs/formItem/index.vue';
	import TableCloumn from '@/components/A/A-form/tableColumn/index.vue';
	import * as app from '@/api/app.js';
	import * as apis from '@/api/order/mainOrder/contractChange/api.js';
	export default {
		components: { TableCloumn, FromItem },
		props: {},
		data() {
			return {
				dataList: [],
				total: 0,
				loading: false,
				queryParams: {
					pageNum: 1,
					pageSize: 10,
				},
			};
		},
		created() {
			this.getList();
		},
		computed: {
			searchs() {
				return [];
			},

			tableCloumns() {
				return [
					{
						label: '变更类型',
						prop: 'changeTypeStr',
					},
					{
						label: '变更状态',
						prop: 'flowStatusStr',
					},
					{
						label: '申请时间',
						prop: 'applyTime',
					},
					{
						label: '变更时间',
						prop: 'changeTime',
					},
					{
						label: '变更人',
						prop: 'applyUsrName',
					},
				];
			},
		},
		methods: {
			toPage(route) {
				this.$router.push(route);
			},
			search() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			reset() {
				this.$refs.search.form_resetFields();
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
				};
				this.getList();
			},
			getList() {
				this.loading = true;
				let params = Object.assign(this.queryParams, this.$route.query);
				apis.OrderChangeHistory(params)
					.then(res => {
						if (res.code == 200) {
							this.dataList = res.rows;
							this.total = res.total;
						}
					})
					.catch(() => {})
					.finally(() => {
						this.loading = false;
					});
			},
			toContractChangePreview(row) {
				this._toPage({
					name: 'ContractChangePreview',
					query: {
						orderChangeId: row.orderChangeId,
						orderId: this.$route.query.orderId,
						from: 'OrderChangeHistory',
					},
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	.box {
		background-color: #fff;
		margin: 20px;
		padding: 0 20px 20px;
		border-radius: 8px;
		.title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 16px;
			color: #333333;
			line-height: 22px;
			text-align: left;
			font-style: normal;
			padding: 15px 0;
			border-bottom: 1px solid #e9e9e9;
		}
	}
</style>
